<template>
  <div v-loading="loading" class="shop-list-container">
    <div class="search-container">
      <div class="title">{{ title }}</div>
      <el-input v-model="shopInputSearchValue" placeholder="请输入名称搜索" size="small" />
    </div>
    <div class="list-content">
      <el-scrollbar ref="" style="height:100%" class="hid-scrollbar-x">
        <div
          v-show="hasSelectAllButton&&$store.state.user.shopId===0"
          :class="[-1===shopId?'active':'']"
          class="list-item"
          @click="chooseShop(selectAllOptions)"
        >{{ selectAllOptions.name || selectAllOptions.shopName}}
        </div>
        <div v-for="item in shopAllData" :key="item.id" @click="chooseShop(item)">
          <div
            :class="[item.shopId===shopId?'active':'']"
            :title="'shopId:'+item.shopId"
            class="list-item"
          >
            <div class="app-line-two">{{ item.name || item.shopName }}</div>
          </div>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  props: {
    title: {
      type: String,
      default: '门店列表'
    },
    hasHeadquarters: {
      type: Boolean,
      default: false
    },
    hasSelectAllButton: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      loading: false,
      shopAllData: [],
      shopFilterArr: [],
      shopId: '',
      shopName: '',
      shopInputSearchValue: '',
      selectAllOptions: { id: -1, name: '所有门店' }
    }
  },
  computed: {
    ...mapGetters([
      'userInfo',
      'manageShopList',
      'manageShopListExcludeHeadquarters'
    ]),
    shopChange() {
      const { manageShopList, manageShopListExcludeHeadquarters } = this
      return { manageShopList, manageShopListExcludeHeadquarters }
    }
  },
  watch: {
    shopInputSearchValue(newValue, oldValue) {
      let filterArr = this.shopFilterArr
      filterArr = filterArr.filter(value => {
        return value.name.indexOf(newValue) !== -1
      })
      this.shopAllData = filterArr
    },
    shopChange() {
      this.fetchData()
    }
  },

  created() {
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    /**
     * 获取数据
     */
    // 获取门店 激活门店
    fetchData() {
      this.loading = true
      if (this.hasHeadquarters) {
        this.shopAllData = this.manageShopList
        this.shopFilterArr = this.manageShopList
      } else {
        this.shopAllData = this.manageShopListExcludeHeadquarters
        this.shopFilterArr = this.manageShopListExcludeHeadquarters
      }
      if (this.shopAllData.length > 0) {
        const shopListMenuActiveShop = this.$store.state.menus
          .shopListMenuActiveShop
        if (
          shopListMenuActiveShop &&
            shopListMenuActiveShop.shopId &&
            shopListMenuActiveShop.shopId !== -1
        ) {
          this.shopId = shopListMenuActiveShop.shopId
          this.shopName = shopListMenuActiveShop.shopName
        } else {
          this.shopId = this.shopAllData[0].id
          this.shopName = this.shopAllData[0].name
        }
        this.chooseShop({ id: this.shopId, name: this.shopName })
      }
      this.loading = false
    },

    // 选择门店
    chooseShop(item) {
      this.shopId = item.shopId
      this.shopName = item.name
      this.$store.state.menus.shopListMenuActiveShop = {
        shopId: item.shopId,
        shopName: item.name
      }
      this.$emit('emitShopId', {
        shopId: this.shopId,
        shopName: this.shopName
      })
    }
  }
}
</script>

<style scoped lang="scss">
.shop-list-container {
  width: 180px;
  //padding: 20px 0;
  background-color: #fff;
  border-radius: 5px;
  margin-right: 10px;
  min-height: 500px;
  max-height: calc(100vh - 80px);
}

.search-container {
  height: 90px;
  padding: 0 10px;

  .title {
    height: 50px;
    line-height: 50px;
    font-size: 20px;
    font-weight: bold;
  }
}

.list-content {
  font-size: 14px;
  height: calc(100vh - 178px);

  .list-item {
    //height: 40px;
    line-height: 1.5;
    cursor: pointer;
    padding:10px;
    width: 100%;
  }

  .active {
    color: #fff;
    background-color: $primary;
  }
}
</style>
